<template>
  <div class="jd-swipe">
    <!-- 轮播图 S -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="img in imgArr" :key="img.id">
        <img v-lazy="img.url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图 E -->
  </div>
</template>
<script>
import Vue from 'vue'
import 
{ 
  Swipe,
  SwipeItem,
  Lazyload,  
  } from 'vant';
Vue.use(Lazyload)
export default {
  data() {
    return {
      imgArr:[{id:1,url:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/193466/6/7266/177399/60c026adEca64fb97/5b0bb565765923a1.jpg!cr_1053x420_4_0!q70.jpg.dpg'},
      {id:2,url:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/115456/40/7331/100669/5ec3a9c6E3dcbadb7/46071c04455c0d5b.jpg!cr_1053x420_4_0!q70.jpg.dpg'},
      {id:3,url:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/192245/11/5697/85140/60b4e9f5E2da3930c/96fd61d05974ba8c.jpg!cr_1053x420_4_0!q70.jpg.dpg'},
      {id:4,url:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/194801/31/6939/86971/60bdf25dEa54f95eb/5963adb4a8de31cf.jpg!cr_1053x420_4_0!q70.jpg.dpg'}
      ],
    };
  },
  components: {
    [Swipe.name]:Swipe,
    [SwipeItem.name]:SwipeItem,
  },
  created() {
  },
  computed: {
    
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
//轮播图
.jd-swipe{
  margin-top: 1.5rem;
}
.van-swipe{
  width: 9.333333rem;
  height:3.733333rem;
  margin: .133333rem auto;
  border-radius: 7px;
  img{
    display: block;
    width: 100%;
    height: 100%;
  }
}

</style>
